/*
 * @Description: 
 * @Author: fhw
 * @Date: 2023-02-23 15:46:26
 */
import { FormConfig, FormUpload } from '@/components'
import UserImg from '@/components/userImg'
import { DoType, getDoTypeTitle } from '@/interfaces'
import { errorTips, successTips } from '@/utils'
import { isTrue } from '@/utils/tools'
import { clone, equals } from 'ramda'
import { computed, defineComponent, PropType, reactive, ref, watch } from 'vue'
import { AdminUserState } from '../uilts'
import { OssData } from '@/utils/upload'
const props = {
    visible: {
        type: Boolean as PropType<boolean>,
        required: true
    },
    dataSource: {
        type: Object as PropType<AdminUserState>
    },
} as const
export default defineComponent({
    props,
    name: 'CreateIndex',
    emits: ['cancel', 'search'],
    setup(props, { emit }) {
        const rules = {
            username: [{ required: true, message: '请输入用户名称', trigger: 'change' }],
            account: [{ required: true, message: '请输入用户账号', trigger: 'change' }],
            password: [{ required: true, message: '请输入密码', trigger: 'change' }],
            status: [{ required: true, message: '请选择启用状态', trigger: 'change' }],
        }
        const pageState = reactive({
            loading: false,
            type: DoType.create,
            formData: {} as AdminUserState
        })
        const isDisabled = computed(() => {
            return !equals(pageState.type, DoType.create)
        })
        function cancel() {
            pageState.type = DoType.create
            pageState.formData = {}
            pageState.loading = false
            emit('cancel')
        }
        async function submit() {
            const params = {
                username: pageState.formData.username as string,
                avatar: pageState.formData.avatar as string,
                status: pageState.formData.status as any,
                userId: pageState.formData.id as number,
                password: pageState.formData.password as string,
                account: pageState.formData.account as string
            }
            const func = equals(pageState.type, DoType.create) ? API.server.adminUser.registerAdminUser.request : API.server.adminUser.updateAdminUser.request
            pageState.loading = true
            const { success, msg } = await func(params)
            pageState.loading = false
            if (success) {
                successTips(msg)
                cancel()
                emit('search')
                return
            }
            errorTips(msg)
        }
        watch(() => props.visible, (visible) => {
            if (visible) {
                pageState.formData = clone(props.dataSource) ?? {}
                pageState.type = isTrue(props.dataSource) ? DoType.edit : DoType.create
            }
        })
        /** 头像上传 */
        async function handleChange(data: OssData) {
            if (!data.url) {
                errorTips('上传失败，请联系管理员处理')
                return
            }
            pageState.formData.avatar = data.url
        }
        return () => (
            <div>
                <a-modal
                    title={`${getDoTypeTitle(pageState.type)}角色`}
                    visible={props.visible}
                    onCancel={cancel}
                    footer={null}
                    centered
                    confirmLoading={pageState.loading}
                >
                    <a-form
                        class="ant-advanced-search-form"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 14 }}
                        model={pageState.formData}
                        rules={rules}
                        onFinish={submit}
                    >
                        <a-row>
                            <a-col span={24}>
                                <a-form-item name="avatar" label="头像">
                                    <FormUpload
                                        onChange={handleChange}
                                        v-slots={{
                                            text: () => (
                                                <UserImg
                                                    key="resume-userImg"
                                                    iconSize={166}
                                                    imgSize={166}
                                                    headimgurl={pageState.formData.avatar}
                                                />
                                            ),
                                        }}
                                    ></FormUpload>
                                </a-form-item>
                            </a-col>
                            <a-col span={24}>
                                <a-form-item name="account" label="账号">
                                    <a-input v-model={[pageState.formData.account, 'value']} disabled={!equals(pageState.type, DoType.create)} />
                                </a-form-item>
                            </a-col>
                            {
                                equals(pageState.type, DoType.create) && (
                                    <a-col span={24}>
                                        <a-form-item name="password" label="密码">
                                            <a-input v-model={[pageState.formData.password, 'value']} type="password" />
                                        </a-form-item>
                                    </a-col>
                                )
                            }
                            <a-col span={24}>
                                <a-form-item name="username" label="用户名称">
                                    <a-input v-model={[pageState.formData.username, 'value']} />
                                </a-form-item>
                            </a-col>
                            <a-col span={24}>
                                <a-form-item name="status" label="是否启用">
                                    <FormConfig
                                        prop="status"
                                        v-model={[pageState.formData.status, 'value']}
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <div style={{ textAlign: 'center' }}>
                            {[DoType.create, DoType.edit].includes(pageState.type) && (
                                <a-button type="primary" loading={pageState.loading} html-type="submit">
                                    提交
                                </a-button>
                            )}
                            <a-button onClick={cancel}>取消</a-button>
                        </div>
                    </a-form>
                </a-modal>
            </div>
        )
    }
})
